<?xml version="1.0" encoding="utf-8" ?>
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<jsp:include page="/commonPart/htmlHeader2.jsp">
	<jsp:param name="title" value="更改头像图片-${userInfo.name}的个人空间-CommonWorld" />
</jsp:include>
<body>
<div id = "CW_Screen" >
	<jsp:include page= "/commonPart/bodyHeader2.jsp" ></jsp:include>
	<div id = "CW_Content">
		<div id = "SpaceLeft">
			<div class = "AdminNav clearfix">
				<a href = "${userUrls.home}" class = "u" title = "返回我的空间首页">
					<img src = "${userInfo.headImage}" alt = "${userInfo.name}" class = "SmallPortrait" user = "${userInfo.id}" />	
				</a>
				<span class = "h">空间管理</span>
			</div>
			<div id = "AdminMenus" class = "Mod">
				<ul>
					<li class = "caption">
						<strong>个人信息管理</strong>
						<ol>
							<li><a href = "${userUrls.adminInbox}">站内留言</a></li>
							<li><a href = "${userUrls.adminProfile}">修改个人资料</a></li>
							<li><a href = "${userUrls.adminChqwd}">更改登录密码</a></li>
							<li class = "active"><a href = "${userUrls.adminPortrait}">更改头像图片</a></li>
						</ol>
					</li>
				</ul>
				<ul>
					<li class = "caption">
						<strong>博客管理</strong>
						<ol>
							<li><a href = "${userUrls.adminNewBlog}">发表博客</a></li>
							<li><a href = "${userUrls.adminDrafts}">草稿箱(${draftInfos.count})</a></li>
							<li><a href = "${userUrls.adminBlogCatalogs}">博客设置/分类管理</a></li>
						</ol>
					</li>
				</ul>
			</div>		
		</div>
		<div class = "SpaceList" id = "AdminBody">
			<div class = "TopBar">
			</div>
			<div class = "AdminHead">
				<h1>更改头像图片</h1>
			</div>
			<div class = "AdminContent MainForm">
				<form id = "form_portrait" action = "/action/user/uploadPortrait" encType = "multipart/form-data" method = "post">
					<table>
						<tr>
							<th width = "180">图片文件(不能超过1024k): </th>
							<td>
								<input name = "img" id = "f_protrait" type = "file" size = "30" />
								<input class = "BUTTON SUBMIT" id = "btn_preview" type = "submit" value = "上传" />					
							</td>
						</tr>
					</table>
					<div id = "NewPortrait">
						<img id = "f_portrait_temp" style = "display: none;" src = "" />
					</div>
					<div id = "btn_saves" style = "display: none">
						<input class = "BUTTON SUBMIT" id = "btn_save_region" type = "button" value = "保存选中区域"></input>
						<input class = "BUTTON SUBMIT" id = "btn_save_all" type = "button" value = "保存全图"></input> 选择“保存全图”头像可能会变形 
					</div>
				</form>
			</div>
			<form id='form_save' action="/action/user/savePortrait" style='display:none;'>
   			 	<input type='hidden' id='img_left' name='left' value='0'/>
   				<input type='hidden' id='img_top' name='top' value='0'/>
    			<input type='hidden' id='img_width' name='width' value='0'/>
    			<input type='hidden' id='img_height' name='height' value='0'/> 
			</form>
			<link href="/js/jcrop/jquery.Jcrop.css" rel="stylesheet" type="text/css" />
			<script src="/js/jcrop/jquery.Jcrop.min.js?t=1377425776000"></script>
			<script>
				$(document).ready(function(){
					$('#btn_save_all').click(function() {
						ajax_post('/action/user/savePortrait', '', function(html) {
							alert("头像更新成功");
							location.reload();
						});
					});
					$('#btn_save_region').click(function(){
						var args = 'left=' + $('#img_left').val() + '&top=' + $('#img_top').val() + '&width=' + $('#img_width').val() + '&height=' + $('#img_height').val();
						ajax_post('/action/user/savePortrait', args,function(result) {
							if (result.length > 0)
								alert(result);
							else {
								alert('头像更新成功');
								location.reload();
							}
						});
					});
					
					$('#form_portrait').ajaxForm({
						dataType: 'json',
						success: function(json) {
							if (json.img) {
								var temp = $('#f_portrait_temp');
								temp.attr({
									width: json.width,
									height: json.height,
									src: json.img + '?r=' + Math.random()
								});
								temp.show();
								temp.Jcrop({
									setSelect: [10, 10, 210, 210],
									aspectRatio: 1,
									onChange: showCoords,
									onSelect: showCoords
								});
								$('#btn_saves').show();
								$('#btn_preview').hide();
							} else if (json.msg)
								alert(json.msg);
						},
					});
					
					$("#form_portrait").ajaxStart(function() {
						$('#btn_preview').val('正在上传,请稍候...');
						$('#btn_preview').attr('disabled', true);
					});
					$("#form_portrait").ajaxComplete(function(event, request, settings) {
						$('#btn_preview').val('上传');
						$('#btn_preview').attr('disabled', false);
					});
				});
				function showCoords(c) {
					$('#img_left').val(c.x);
					$('#img_top').val(c.y);
					$('#img_width').val(c.w);
					$('#img_height').val(c.h);
				}
			</script>
		</div>
	</div>
	<div class = "clear"></div>
	<div id = "footer"></div>
</div>
</body>
</html>